<template>
  <div class="home">
    <!-- 头   -->
    <Header></Header>
    <!-- 头   -->
    <!-- 轮播图 -->
    <div class="lbt">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /></swiper-slide>
        <swiper-slide style="background: green">Slide 2</swiper-slide>
        <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /></swiper-slide>
        <swiper-slide style="background: red">Slide 4</swiper-slide>
        <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <!-- 轮播图 -->
    <!-- 宫格 -->
    <div class="navs">
      <div class="nav">
        <img src="@/assets/imgs/icon-qiandao.png" />
        <span>签到</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-fujin.png" />
        <span>附近</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-zhanhui.png" />
        <span>旅展</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-fuli.png" />
        <span>福利</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-muma.png" />
        <span>玩乐</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-xingxing.png" />
        <span>周边</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-tiyu.png" />
        <span>体育</span>
      </div>
      <div class="nav">
        <img src="@/assets/imgs/icon-qinzi.png" />
        <span>亲子</span>
      </div>
    </div>
    <!-- /宫格 -->
    <!-- 热卖商品 -->
    <div class="hotGoods">
      <div class="tit">热卖商品</div>
      <div class="main">
        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" />
          </div>
          <div class="r">
            <div class="name">庞日飞</div>
            <div class="address">山西大同</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" />
          </div>
          <div class="r">
            <div class="name">庞日飞</div>
            <div class="address">山西大同</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" />
          </div>
          <div class="r">
            <div class="name">庞日飞</div>
            <div class="address">山西大同</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" />
          </div>
          <div class="r">
            <div class="name">庞日飞</div>
            <div class="address">山西大同</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" />
          </div>
          <div class="r">
            <div class="name">庞日飞</div>
            <div class="address">山西大同</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" />
        </div>

        <div class="goods">
          <div class="l">
            <img src="@/assets/imgs/zhutu.jpg" />
          </div>
          <div class="r">
            <div class="name">庞日飞</div>
            <div class="address">山西大同</div>
            <div class="price">3</div>
          </div>
          <img class="cart" src="@/assets/imgs/car.png" />
        </div>
      </div>
    </div>
    <!-- 热卖商品 -->
  </div>
</template>
<style lang="scss" scoped>
@import "@/assets/css/common.scss";
.home {
  width: 100%;
  height: 100%;
  background: #ccc;

  .lbt {
    width: 100%;
    height: px2rem(150);
    overflow: hidden;
    .swiper-container,
    .swiper-slide {
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .navs {
    width: 100%;
    height: px2rem(174);
    background: blue;
    display: flex;
    flex-wrap: wrap;

    .nav {
      width: 25%;
      height: px2rem(87);
      background: green;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        margin-top: px2rem(10);
      }
      img {
        width: px2rem(40);
        height: px2rem(40);
      }
    } 
}
    .hotGoods{
      width:100%;
      min-height: px2rem(100);
      background: blue;
      .tit{
        padding-left: px2rem(10);
        border:px2rem(1) solid #ccc;
      }
      .main{
        .goods{
          display: flex;
          background: green;
          padding:px2rem(10);
          border:px2rem(1) solid #ccc;
          position: relative;
          .cart{
            width: px2rem(25);
            height: px2rem(25);
            position: absolute;
            right: px2rem(10);
            bottom: px2rem(10);
          }
          .l{
            width: px2rem(80);
            height: px2rem(80);
            img{
              width: 100%;
              height: 100%;
            }
          }
          .r{
            flex: 1;
            background: yellow;
          }
        }
      }
}
}
</style>
 <script>
// 导出数据
import Header from "@/components/Header";
export default {
  //激活组件
  components: {
    Header,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        // Some Swiper option/callback...
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(3, 1000, false);
  },
};
</script>


